
<template>
    <theme-box title="营销分钱规则添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <!--<form-group title="商户号" :required="true" >-->
                    <!--<select name="mchtId" class="form-control" :value.sync ="mchtIdValue">-->
                        <!--<option v-for="mcht in mchtList" :value="mcht.value">-->
                            <!--{{mcht.key}}-->
                        <!--</option>-->
                    <!--</select>-->
                <!--</form-group>-->
                <form-select title="商户号" :required="true" name="mchtId" :options="mchtList" :value.sync="mchtIdValue"></form-select>
                <form-input title="规则名称" :required="true" name="ruleName"></form-input>
                <form-input title="单张营销金额" :required="true" name="markAmt"></form-input>
                <form-select title="电子券类型" :required="true" name="couponType" :options="type"></form-select>
                <form-select title="核销标识" :required="true" name="verFlag" :options="flag"></form-select>
                <form-input title="芸券比例" :required="false" name="yqProp"></form-input>
                <form-input title="代理商比例" :required="false" name="agentProp" :value.sync="agentPropValue"></form-input>
                <form-input title="用户比例" :required="false" name="usrProp" :value.sync="usrPropValue"></form-input>
                <div class="box1">
                    <form-input title="代理商户比例" :required="false" name="agentMcht" :value.sync="agentMchtValue"></form-input>
                    <form-input title="代理店员比例" :required="false" name="agentOpr" :value.sync="agentOprValue"></form-input>
                </div>
                <div class="box2">
                    <form-input title="扫码比例" :required="false" name="scanProp" :value.sync="scanPropValue" ></form-input>
                    <form-input title="使用比例" :required="false" name="useProp" :value.sync="usePropValue" ></form-input>
                    <form-input title="分享比例" :required="false" name="shareProp" :value.sync="sharePropValue"></form-input>
                    <form-input title="分享层级" :required="false" name="shareLvl" id="shareLvl"></form-input>
                    <form-select title="层级比例" :required="false" name="lvlProp" :options="lvl" id="lvlProp"></form-select>
                </div>
            </div>
            <div class="box_rule clearfix" style="color:red">
               <div class="left">规则说明:</div>
               <div class="right">
                   <p>1.芸券比例+代理商比例+用户比例=100% (代理商比例和用户比例可只填一项)</p>
                   <p>2.代理商户+代理员工=100%(代理商比例不填时这两项不填)</p>
                   <p>3.扫码比例+使用比例+分享比例=100%(必须填一项不能全部为空)</p>
                   <p>4.分享层级:如有分享比例,此项为必填最小1最大5 </p>
                   <p>5.层级比例:最小5 最大1</p>
               </div>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
            </div>
            <!-- /.box-footer -->
        </form>
    </theme-box>
</template>
<style>
    .clearfix:after {
        content: "";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
    }
    .box_rule{
        /*width:45%;*/
        margin-left:174px;
        margin-right:auto;

    }
</style>
<script>
    import 'plugins/jquery-validation';
    import 'lib/validatorByte.js';
    var serialize = require('form-serialize');


    export default {
        data: () => ({
            repVal:'',
            mchtList: [],
            mchtIdValue:'',
            agentPropValue:'',
            usrPropValue:'',
            agentMchtValue:'',
            agentOprValue:'',
            scanPropValue:'',
            usePropValue:'',
            sharePropValue:'',
            type:[
                {key: "折扣券",value: "rebate"},
                {key: "抵用券",value: "voucher"},
                {key: "代金券",value: "cash"},
                {key: "礼品券",value: "present"},
                {key: "票务",value: "ticket"}
            ],
            flag:[
                {key: "核销后",value: "0"},
                {key: "核销前",value: "1"}
            ],
            lvl:[
                {key: "1",value: "1"},
                {key: "2",value: "2"},
                {key: "3",value: "3"},
                {key: "4",value: "4"},
                {key: "5",value: "5"}
            ]
        }),
        watch:{
            //代理商比例为空 代理商户和代理店员也不填
            async  mchtIdValue(v){
                var rep = await this.$post({
                    url: "/api/v2" + projectName_Url + "/plat/mcht/getMchtProp/" + v,
                    method: "GET",
                })
                this.repVal = rep.content.yqProp;
                this.$els.form.yqProp.value = rep.content.yqProp
            },
            agentPropValue(value){
                if(value != '' && value != '0'){
                    $(".box1").css("display",'');
                    $(this.$els.form.agentProp).rules("add", {
                        int:true
                    });
                }else{
                    $(".box1").css("display",'none');
                    $(this.$els.form.agentProp).rules("remove", "int");
                }
            },
            //有代理商户 为整数
            agentMchtValue(value){
                if(value != '' && value != '0'){
                    $(this.$els.form.agentMcht).rules("add", {
                        int:true
                    });
                }else{
                    $(this.$els.form.agentMcht).rules("remove", "int");
                }
            },
            agentOprValue(value){
                if(value != '' && value != '0'){
                    $(this.$els.form.agentOpr).rules("add", {
                        int:true
                    });
                }else{
                    $(this.$els.form.agentOpr).rules("remove", "int");
                }
            },
            //有用户比例
            usrPropValue(value){
                if(value != '' && value != '0'){
                    $(".box2").css("display",'');
                    $(this.$els.form.usrProp).rules("add", {
                        int:true
                    });
                }else{
                    $(".box2").css("display",'none');
                    $(this.$els.form.usrProp).rules("remove", "int");
                }
            },
            //有扫码比例  分享和使用比例默认平分
            scanPropValue(value){
                if(value != '' && value != '0'){
                    $(this.$els.form.scanProp).rules("add", {
                        int:true
                    });
                }else{
                    $(this.$els.form.scanProp).rules("remove", "int");
                }
            },
            usePropValue(value){
                if(value !=''&& value != '0'){
                    $(this.$els.form.useProp).rules("add", {
                        int:true
                    });
                }else{
                    $(this.$els.form.useProp).rules("remove", "int");
                }
            },
            sharePropValue(value){
                if(value !=''&& value != '0'){
                    $(this.$els.form.shareProp).rules("add", {
                        int:true
                    });
                  //如果分享比例必填 分享层级最小1最大5 层级比例最小5 最大1
                    $("#shareLvl").css("display",'block');
                    $("#lvlProp").css("display",'block');
                    $(this.$els.form.shareLvl).rules("add", {
                        required:true,
                        max: 5,
                        min:1,
                        int:true
                    });
                }else{
                    $("#shareLvl").css("display",'none');
                    $("#lvlProp").css("display",'none');
                    $(this.$els.form.shareProp).rules("remove", "int");
                }
            }
        },
        methods: {
            reset() {
                $("label.error").remove();
                this.$els.form.reset();
                $('#yqProp').attr('value',this.repVal);
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId;
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/"+ mchtId,
                    method:"GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("mchtList", list);
                    self.mchtIdValue = list[0].value
                    let _value = []
                    for(var i = 0;i < list.length;i++){
                        _value.push(list[i].value)
                    }
                }, error => {});
            }
        },
        ready() {
            var self = this;
            self.getMcht();
//            $('#yqProp').val('20');
            $("#yqProp").attr("readOnly", true);
            $("#shareLvl").css("display", 'none');
            $("#lvlProp").css("display", 'none');
            $(".box1").css("display",'none');
            $(".box2").css("display",'none');
            $(this.$els.form).validate({
                submitHandler: async function() {
                    var _data = serialize(this.currentForm, {
                        hash: true,
                        empty: true
                    });
                    //传当前登录的操作员id
                    var oprId = JSON.parse(localStorage.getItem("id_token")).oprId
                    _data.updOpr = oprId;

                    //芸券比例+代理商比例+用户比例
                    var yqPropValue = $('#yqProp').val();
                    var yqPropValue =(yqPropValue == ''?0:parseInt(yqPropValue));
                    var agentPropValue = $('#agentProp').val();
                    var agentPropValue =(agentPropValue == ''?0:parseInt(agentPropValue));
                    var usrPropValue = $('#usrProp').val();
                    var usrPropValue =(usrPropValue == ''?0:parseInt(usrPropValue));
                    if(yqPropValue + agentPropValue + usrPropValue != '100'){
                        Midway.alert({title:"操作提示",content:"芸券比例,代理商比例,用户比例的和为100"});
                        return false;
                    }
                    if(agentPropValue != ''){
                        //代理商户比例+代理店员比例=100
                        var agentMchtValue = $('#agentMcht').val();
                        var agentMchtValue = (agentMchtValue == ''?0:parseInt(agentMchtValue));
                        var agentOprValue = $('#agentOpr').val();
                        var agentOprValue = (agentOprValue == ''?0:parseInt(agentOprValue));
                        if(agentMchtValue + agentOprValue != '100'){
                            Midway.alert({title:"操作提示",content:"代理商户比例与代理店员比例的和为100"});
                            return false;
                        }
                    }else{

                    }

                    //有用户比例的情况下 扫码比例 分享比例 使用比例 三个必填一项
                   if(usrPropValue !='' && usrPropValue != '0') {
                       var scanPropValue = $('#scanProp').val();
                       var scanPropValue = (scanPropValue == '' ? 0 : parseInt(scanPropValue));
                       var sharePropValue = $('#shareProp').val();
                       var sharePropValue = (sharePropValue == '' ? 0 : parseInt(sharePropValue));
                       var usePropValue = $('#useProp').val();
                       var usePropValue = (usePropValue == '' ? 0 : parseInt(usePropValue));
                       if (scanPropValue == '' && sharePropValue == '' && usePropValue == '') {
                           Midway.alert({title: "操作提示", content: "扫码比例、分享比例、使用比例至少填一项"});
                           return false;
                       };
                       //扫码比例+分享比例+使用比例 = 100
                       if(scanPropValue + sharePropValue + usePropValue != '100'){
                           Midway.alert({title:"操作提示",content:"扫码比例、分享比例、使用比例的和为100"});
                           return false;
                       }
                   }

                   //分享层级 和 层级比例要么都为1，要么都不为1
                    if(_data.shareLvl > 1 && _data.lvlProp == 1){
                        Midway.alert({title:"操作提示",content:"分享层级大于1时，层级比例不能为1"});
                        return false;
                    }else if(_data.shareLvl== 1 && _data.lvlProp != 1){
                        Midway.alert({title:"操作提示",content:"分享层级等于1时，层级比例只能为1"});
                        return false;
                    }

                   if(_data.shareProp == '' || _data.shareProp == '0'){
                       _data.lvlProp = 0;
                   }else{
                       _data.lvlProp =  _data.lvlProp;
                   }
                    var result = await self.$post({
                        url: "/api/v2"+ projectName_Url +"/plat/rule/add",
                        data: _data
                    })
                    let data = {
                        title: "操作成功",
                        content: "是否进入营销分钱规则列表查看?"
                    }
                    Midway.confirm(data).then(function () {
                        self.$route.router.go('/pennyRule/list');
                    })
                    self.reset()
                },

                errorPlacement: function(error, element) {
                    if (element.attr("name") == "file") {
                        error.insertAfter(".file-item");
                    } else {
                        error.insertAfter(element)
                    }
                },
                rules: {
                    ruleName:{
                        required:true,
                        maxlength:32
                    },
                    agentProp:{
                        min:0,
                    },
                    usrProp:{
                        min:0,
                    },
                    agentMcht:{
                        min:0,
                    },
                    agentOpr:{
                        min:0,
                    },
                    scanProp:{
                        min:0,
                    },
                    useProp:{
                        min:0,
                    },
                    shareProp:{
                        min:0,
                    },
                    shareLvl:{
                        min:0,
                    },
                    markAmt:{
                        min:0,
                        int:true,
                        required:true
                    }

                },
            });
        }
    }
</script>
